<template>
  <div class="qrCode">
    <div class="bottom">
      <div class="android">
        <!--      微信公众号-->
        <div class="title">微信通用版</div>
        <img alt="" src="/src/assets/icons/szhy.jpg" style="width: 167px; height: 167px" />
        <ul class="text">
          <!--      微信公操作流程说明-->
          <li>1.长按图片识别二维码</li>
          <li>2.关注公众号点击发送消息</li>
          <li>3.点击右下角'服务大厅-数字湖艺'</li>
          <li>4.注册账号</li>
          <li>5.完善个人信息</li>
        </ul>
      </div>
      <div class="ios">
        <span class="title">操作视频</span>
        <figure ref="voideQ人Code" class="qrcode" @click="touchEnd(voideQ人Code)">
          <vue-qrcode
            :options="option"
            tag="svg"
            value="https://mp.weixin.qq.com/s?__biz=MzkwMjY1Nzg1MQ==&mid=2247483658&idx=1&sn=2668cd68ba2f4a13b48404133a3be8b1&chksm=c0a3635ef7d4ea480880763c9903ca527ba6ec1458d26f720c3a27ad122441df00d17ecdf30c#rd"
          />
          <img alt="" class="qrcode__image" src="/favicon.png" />
        </figure>

        <ul class="text" style="width: 100%">
          <li>1.长按二维码图片识别</li>
          <li>2.跳转视频操作页面</li>
          <li>3.依据教程完善个人信息</li>
        </ul>
      </div>
    </div>
    <div class="bottom">
      <div class="android">
        <span class="title">安卓手机版</span>
        <template v-if="qrcodeValue">
          <figure ref="androidQrCode" class="qrcode" @click="touchEnd(androidQrCode)">
            <vue-qrcode :options="option" :value="qrcodeValue" tag="svg" />
            <img alt="" class="qrcode__image" src="/favicon.png" />
          </figure>
        </template>

        <ul class="text">
          <li>1.点击图片保存到手机</li>
          <li>2.打开微信扫描二维码</li>
          <li>3.进入空白页点击右上角三个点</li>
          <li>4.选择“默认浏览器打开”</li>
          <li>5.点击下载完成后安装</li>
          <li>6.注册账号完善个人信息</li>
        </ul>
      </div>
      <div class="ios">
        <span class="title">苹果手机版</span>
        <figure ref="iosQrCode" class="qrcode" @click="touchEnd(iosQrCode)">
          <vue-qrcode :options="option" tag="svg" value="https://szhy.artcollegehb.cn/app/#/" />
          <img alt="" class="qrcode__image" src="/favicon.png" />
        </figure>
        <ul class="text">
          <li>1.点击二维码进行扫描</li>
          <li>2.若有提示“请更新到最新版本”</li>
          <li>3.请点击右上角三个点，选择“刷新”再次登录</li>
        </ul>
      </div>
    </div>
    <div class="top">
      <div class="android">
        <span class="title">咨询服务QQ群</span>
        <img alt="" src="/src/assets/icons/QQqun.png" style="width: 167px" />

        <ul class="text">
          <li>1.使用中有任何问题可入群交流</li>
          <li>2.QQ群号：820 711 478</li>
        </ul>
      </div>
      <div class="ios">
        <span class="title">咨询服务微信客服</span>
        <img alt="" src="/src/assets/icons/weixinkefu.png" style="width: 167px" />

        <ul class="text">
          <li>1.可添加客服微信进行单独咨询</li>
        </ul>
      </div>
      <!--      <img alt="" src="/src/assets/icons/QQ.jpg" />-->
    </div>
    <div class="foot">
      <p>如有问题，请联系管理员</p>
      <div>
        <p>电话： <a>13554546953</a>&nbsp; </p>
        <p>
          微信号：
          <a>13554546953</a>&nbsp;
        </p>
        <p>QQ: <a>379 043 2692</a></p>
      </div>
    </div>
    <van-image-preview v-model:show="show" :images="images" @close="onClose" />
  </div>
</template>

<script lang="ts" setup>
  import html2canvas from 'html2canvas';
  import { ImagePreview } from 'vant';
  import axios from '@/utils/http/axios';
  import { onMounted } from 'vue';
  import VueQrcode from '@chenfengyuan/vue-qrcode';

  const option = {
    errorCorrectionLevel: 'Q',
    width: 170,
  };

  const iosQrCode = ref(null);

  const androidQrCode = ref(null);

  const voideQ人Code = ref(null);

  const VanImagePreview = ImagePreview.Component;

  const touchEnd = (nameRef: any) => {
    html2canvas(nameRef, {
      allowTaint: true,
      scale: 2,
    }).then((canvas) => {
      let imgUrl: any = canvas.toDataURL('image/png');
      images.value.push(imgUrl);
      show.value = true;
    });
  };

  const onClose = () => {
    images.value = [];
  };

  const qrcodeValue = ref('');
  const getQrCodeValue = () => {
    axios.get('https://szhy.artcollegehb.cn/gateway/authApi/user/getAppInfo').then(({ data }) => {
      if (data.code === 0) {
        const newData = JSON.parse(data.data);
        qrcodeValue.value = newData.uri;
      }
    });
  };

  onMounted(() => {
    getQrCodeValue();
  });
  const images = ref([]);
  const show = ref(false);
</script>

<style lang="less" scoped>
  .qrCode {
    .title {
      font-size: 30px;
      font-weight: 700;
      margin-bottom: 18px;
    }

    .top,
    .bottom {
      display: flex;
      justify-content: space-around;
      margin-bottom: 10px;

      .text {
        font-size: 24px;
        margin-bottom: 10px;
      }
    }

    .bottom {
      margin-top: 32px;

      .text {
        font-size: 24px;
        margin-bottom: 10px;
        line-height: 1.5;
      }
    }

    .top {
      padding-top: 60px;

      .official_account,
      .explain {
        display: flex;
        flex-direction: column;
        align-items: center;

        img {
          width: 250px;
          height: 250px;
          margin-bottom: 10px;
        }

        .text {
          line-height: 1.3;
          padding-left: 30px;
        }
      }

      .explain {
        padding-right: 35px;

        img {
          margin-bottom: 0;
          width: 15%;
          height: 15%;
        }

        .text {
          line-height: 2.3;
          padding-left: 0;
        }
      }

      .official_account {
        padding-right: 18px;
      }
    }

    .crowd {
      display: flex;
      align-items: center;

      img {
        width: 250px;
        height: 250px;
      }
    }

    .android,
    .ios {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 60px;
      width: 360px;

      .text {
        font-size: 24px;
        margin-bottom: 10px;
      }
    }

    .android {
      .text {
        padding-right: 10px;
      }
    }

    .ios {
      .text {
        padding-left: 10px;
      }
    }

    .infomantion {
      font-size: 22px;
    }

    .app-icon {
      width: 200px;
      height: 200px;
    }

    .qrcode {
      display: inline-block;
      font-size: 0;
      margin-bottom: 10px;
      position: relative;
    }

    .qrcode__image {
      background-color: #fff;
      border-radius: 0.25rem;
      box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.25);
      height: 15%;
      left: 50%;
      overflow: hidden;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 15%;
    }

    .foot {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-top: 60px;

      p {
        margin: 5px 0;
      }
    }
  }
</style>
